<template>
	<view class="pages_coupon">
		<uni-popup class='pop1' ref="popup1" type="center">
			<view class="close" @click="close">
				<uni-icons type="closeempty" color="rgba(255,255,255,0.6)" size="30"></uni-icons>
			</view>
			<view class="bg" @click="getRed" v-if="!!NewList">
				<view class="item" v-for="item in NewList.list" :key="item.id">
					<view class="item_left">
						<view><text style="font-size: 26rpx;">￥</text>{{item.money}}</view>
						<view style="font-size: 28rpx;font-weight: normal;color: grey;">{{item.con_money}}</view>
					</view>
					<view class="item_right">
						<view>{{item.name}}</view>
						<view style="font-size: 28rpx;font-weight: normal;color: grey;">{{item.validity_str}}</view>
					</view>
				</view>
			</view>
			<view class="getRed" @click="getRed">
				<view class="btn">{{$t('coupon.Get')}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { couponAddNew } from '@/api/api.js'
	export default {
		props: ['NewList'],
		data() {
			return {
				
			}
		},
		methods: {
			// 刚加载展示红包
			showNew() {
				if (!!this.NewList) {
					this.$nextTick(() => {
						this.$refs.popup1.open()
					})
				}
			},
			// 关闭红包
			close() {
				this.$refs.popup1.close()
			},
			// 点击红包
			getRed() {
				this.$refs.popup1.close()
				couponAddNew({
					token: uni.getStorageSync('token')
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/shop/wallet/coupon/coupon'
						})
					}, 500)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .pop1 .uni-popup__wrapper {
		width: 600rpx;
		height: 700rpx;
		border-radius: 16rpx;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		background-color: #fff !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex-direction: column !important;
		font-size: 32rpx;
		color: #333;
		font-weight: 400;

		.bg {
			width: 600rpx;
			height: 700rpx;
			position: absolute;
			border-radius: 16rpx;
			background-color: #7CDBDC;
			padding: 20rpx 20rpx 140rpx;
			overflow: auto;
			.item{
				display: flex;
				background-color: #fff;
				height: 140rpx;
				margin-top: 10rpx;
				.item_left{
					width: 35%;
					border-right: #7CDBDC dashed 1px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 50rpx;
					font-weight: bold;
					color: #7CDBDC;
				}
				.item_right{
					width: 60%;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.close {
			position: absolute;
			top: -70rpx;
			right: -60rpx;
		}

		.getRed {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #4AC2C1;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				width: 90%;
				height: 90rpx;
				background-color: #F7DAB2;
				border-radius: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #723B2E;
			}
		}
	}
</style>